import { useEffect, useMemo, useState } from 'react';
import { ConfigProvider, message } from 'antd';
import zhCN from 'antd/lib/locale/zh_CN';

import { ActiveContainers } from '@/components/ActiveContainer';
import { DEFAULT_SETTINGS, MENU_KEY, SETTINGS_LOCAL_KEY } from '@/const';
import { getLocal, saveLocal } from '@/utils';

import SideMenu from '@/components/SideMenu';
import menu from '@/const/config';

import Check from './components/Check';
import Settings from './components/Settings';
import Task from './components/Task';
import Plan from './components/Plan';
import Memo from './components/Memo';

import './index.less';
import 'antd/dist/antd.css';

import Timeline from './components/Timeline';

export default function IndexPage() {
  const [tab, setTab] = useState<string | number>(MENU_KEY.TASK);
  const [updateFlag, update] = useState(0);
  const [countResult, setCountResult] = useState<Record<string, number>>({
    [MENU_KEY.TASK]: 0,
  });
  const [settings, setSettings] = useState(
    getLocal(SETTINGS_LOCAL_KEY, DEFAULT_SETTINGS),
  );

  useEffect(() => {
    Object.entries(settings).forEach((e) => {
      const [key, value] = e;
      document.documentElement.style.setProperty(`--${key}`, String(value));
    });
    saveLocal(SETTINGS_LOCAL_KEY, settings);
  }, [settings]);

  const menuConfig = useMemo(() => {
    return menu.map((i) => {
      return Object.assign({}, i, {
        count: countResult[i.key] || 0,
      });
    });
  }, [countResult]);

  return (
    <ConfigProvider locale={zhCN}>
      <div className="page container">
        <SideMenu config={menuConfig} onSelect={setTab} activeKey={tab} />
        <div className="main-container">
          <ActiveContainers
            active={tab}
            enableSilentLoad
            config={[
              {
                component: (
                  <Task
                    onCountChange={(count) => {
                      setCountResult({
                        [MENU_KEY.TASK]: count,
                      });
                    }}
                  />
                ),
                key: MENU_KEY.TASK,
              },
              {
                component: <Check />,
                key: MENU_KEY.CHECK,
              },
              {
                component: <Plan />,
                key: MENU_KEY.PLAN,
              },
              {
                component: <Memo />,
                key: MENU_KEY.MEMO,
              },
              {
                component: <Timeline />,
                key: MENU_KEY.TIMELINE,
              },
              {
                component: (
                  <Settings
                    settings={settings}
                    onSubmit={(s) => {
                      setSettings(s);
                      update((pre) => pre + 1);
                      message.success('更新成功');
                    }}
                  />
                ),
                key: MENU_KEY.SETTINGS,
              },
            ]}
          />
        </div>
      </div>
    </ConfigProvider>
  );
}
